<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>login</title>
    <link rel="stylesheet" href="./static/layui/css/layui.css">
    <link rel="stylesheet" href="./static/chat/css/style.css">
    <link rel="stylesheet" href="./static/chat/css/login.css">

</head>
<body>

<div class="div-header">
    <a class="logo" href="/">
        <img src="./static/chat/image/logo.png" alt="logo">
        <span class="logo-font">聊天室</span>
    </a>
    <ul class="layui-nav">
        <li class="layui-nav-item">
            <a href="./login.html">登录</a>
        </li>
        <li class="layui-nav-item">
            <a href="./register.html">注册</a>
        </li>
    </ul>
</div>

<div class="login">
    <div>
        <div class="login-den">
            聊天室
        </div>
        <div class="login-input">
            <input type="text" placeholder="用户名不得少于 2-8 位字符" id="username">
        </div>
        <div class="login-input">
            <input type="password" placeholder="密码不得少于 6-18 位字符" id="pwd">
        </div>
        <div class="div-btn">
            <div class="btn-register">注册</div>
        </div>
    </div>
</div>

<script src="static/layui/layui.js"></script>
<script src="static/chat/js/jquery.min.js"></script>

<script>
layui.use('layer', function(){
    var layer = layui.layer;


    $(function(){
        $('.btn-register').click(function(){
            // 接值
            var _u = $('#username').val();
            var _pwd = $('#pwd').val();
            // 验证
            var _username = _u.replace(/\s/g,"")
            // 验证不能为空
            if(_username == ''){layer.msg('用户名不能为空');return false;}
            if(_pwd == ''){layer.msg('密码不能为空');return false;}
            //验证不能有特殊字符
            var patrn = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/im;
            if (patrn.test(_username)) { // 如果包含特殊字符返回false
                layer.msg('用户名不能包含特殊字符');
                return false;
            }
            //验证长度
            var _usernameLen = _username.length;
            var _pwdLen = _pwd.length;
            if(_usernameLen < 2 || _usernameLen > 8){
                layer.msg('用户名必须是2-8位字符');
                return false;
            }
            if(_pwdLen < 6 || _pwdLen > 18){
                layer.msg('密码必须是6-18位字符');
                return false;
            }

            var _data = {username:_username,pwd:_pwd};

            $.ajax({
                url:"php/register.php",
                type:"post",
                data:_data,
                dataType:"json",
                success:function(res){
                    console.log(res)
                }
            });
            console.log(username)
            console.log(pwd)
        })
    });

});

</script>
</body>
</html>
